<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				height: 500px;
				background: skyblue;
				border: 2px solid gray;
				margin-top: 50px;
				list-style: none;
				text-align: center;
			}

			ul li {
				width: 150px;
				height: 200px;
				display: inline-block;
				text-align: center;
				margin-top: 150px;
				transition: transform 2s;

				position: relative;
			}

			ul li img {
				width: 150px;
				height: 200px;
				border: 5px solid white;

			}

			ul li:nth-child(1) {
				transform: rotate(30deg);
			}

			ul li:nth-child(2) {
				transform: rotate(-40deg);
			}

			ul li:nth-child(3) {
				transform: rotate(10deg);
			}

			ul li:nth-child(4) {
				transform: rotate(45deg);
			}

			ul li:hover {
				transform: rotate(0deg) scale(1.5);
				z-index: 999;
				/* 需要设置定位流 */
			}
		</style>
	</head>
	<body>
		<ul>
			<li><img src="img/ms1.PNG" alt=""></li>
			<li><img src="img/ms2.PNG" alt=""></li>
			<li><img src="img/ms3.PNG" alt=""></li>
			<li><img src="img/ms4.PNG" alt=""></li>
		</ul>
	</body>
</html>
